<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>订单管理</title>
</head>
<body>

<button class="layui-btn layui-btn-warm bt_update">添加备注</button>
<!-- 按钮 -->
<%--<c:forEach items="${bts}" var="bt">
    <button class="${bt.method}">${bt.menuname}</button>
</c:forEach>--%>

<!-- <button class="layui-btn bt_add">添加</button>
<button class="layui-btn layui-btn-warm bt_update">修改</button>
<button class="layui-btn layui-btn-danger bt_delete">删除</button> -->

<table id="demo" lay-filter="test"></table>
</body>
</html>

<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;

        //第一个实例
        table.render({
            elem: '#demo',
            toolbar: true,
            url: '${ctx}/orders/page' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {
                    field: 'id',
                    title: 'ID',
                    sort: true,
                    fixed: 'left'
                }, {
                    field: 'userId',
                    title: '用户id'
                }, {
                    field: 'createTime',
                    title: '创建时间'
                }, {
                    field: 'remark',
                    title: '备注'
                }]]
        });

        //修改
        $('.bt_update').click(function () {
            var checkStatus = table.checkStatus('demo');
            if (checkStatus.data.length == 0) {
                layer.msg('至少选择一条数据', {icon: 2})
                return false;
            }

            if (checkStatus.data.length > 1) {
                layer.msg('至多只能选择一条数据', {icon: 2})
                return false;
            }

            var data = $.param(checkStatus.data[0]);

            layer.open({
                type: 2,
                title: '修改',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '${ctx}/orders/showUpdate?' + data
            });
        })

        //搜索
        $('.demoTable .search').click(function () {
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    name: $('[name="name"]').val(),
                }
            })
        })

        //重置
        $('.demoTable .reset').click(function () {
            $('[name="name"]').val("");
            $('.demoTable .search').click();
        })

    });
</script>
